import QtQuick 1.1

Text {
    id: img

    color: "white";
    font.pixelSize: 92;
    transformOrigin: Item.Center
    style: Text.Outline;
    styleColor: "black"

    property int selectionOffset: 10;


    Behavior on color {
        ColorAnimation { duration: 750 }
    }

    Text {
        text: img.text
        color: "black"
        anchors.fill: parent;
        anchors.topMargin: 8;
        anchors.leftMargin: 8;
        font.pixelSize: 92;
        style: Text.Outline;
        styleColor: "black"
        z: -1;
        opacity: 0.3;
        transformOrigin: Item.Center
    }


    function openPrefs() {
        img.parent.showTextMenu()
    }


    MouseArea {
        anchors.fill: parent;
        drag.target: img;
        drag.filterChildren: true

        onPressed: {
            img.parent.itemPressed(img);
        }

        onReleased: {
           img.parent.itemReleased();
        }

        PinchArea {
            anchors.fill: parent;
            pinch.target: img
            pinch.dragAxis: Pinch.XandYAxis
            pinch.minimumScale: 0.5;
            pinch.maximumScale: 5;
            pinch.minimumRotation: -3600;
            pinch.maximumRotation: 3600;
            pinch.maximumX: 1000
            pinch.maximumY: 1000

            onPinchStarted: {
                console.log("onPinchStarted received")
            }
        }
    }

    states: [
        State {
            name: "CENTER"
        },
        State {
            name: "TO_FRONT"
        },
        State {
            name: "TO_BACK"
        }
    ]


    transitions: [
        Transition {
            to: "CENTER"
            SequentialAnimation {
                PropertyAction { target: img; property: "scale"; value:2; }
                PropertyAction { target: img; property: "y"; value: -img.height; }
                PropertyAction { target: img; property: "x"; value: 854/2-img.width/2;  }
                ParallelAnimation {
                    PropertyAnimation { target: img; properties: "y"; to: 480/2-img.height/2; easing.type: Easing.OutCubic; duration: 800; }
                    PropertyAnimation { target: img; property: "scale"; to: 1; easing.type: Easing.OutCubic; duration: 800; }
                }
                ScriptAction { script: { img.parent.itemReleased(); } }
            }
        },
        Transition {
            to: "TO_FRONT"
            SequentialAnimation {
                ParallelAnimation {
                    SequentialAnimation {
                        PropertyAnimation { target: img; property: "scale"; to: scale*0.7; duration: 300; easing.type: Easing.OutQuad; }
                        PropertyAnimation { target: img; property: "scale"; to: scale; duration: 300; easing.type: Easing.InQuad;  }
                    }
                    PropertyAnimation { target: img; properties: "y"; to: -img.height*scale+30; easing.type: Easing.InOutQuad; duration: 600;}
                }
                ScriptAction { script: { img.parent.bringToFront(img); } }
                ParallelAnimation {
                    SequentialAnimation {
                        PropertyAnimation { target: img; property: "scale"; to: scale/0.8; duration: 300; easing.type: Easing.OutQuad;}
                        PropertyAnimation { target: img; property: "scale"; to: scale; duration: 300; easing.type: Easing.InQuad;}
                    }
                    PropertyAnimation { target: img; properties: "y"; to: y; easing.type: Easing.InOutQuad; duration: 600;}
                }
                PropertyAction { target: img; property: "state"; value:""; }
            }
        },
        Transition {
            to: "TO_BACK"
            SequentialAnimation {
                ParallelAnimation {
                    SequentialAnimation {
                        PropertyAnimation { target: img; property: "scale"; to: scale/0.8; duration: 300; easing.type: Easing.OutQuad; }
                        PropertyAnimation { target: img; property: "scale"; to: scale; duration: 300; easing.type: Easing.InQuad;  }
                    }
                    PropertyAnimation { target: img; properties: "y"; to: -img.height*scale+30; easing.type: Easing.InOutQuad; duration: 600;}
                }
                ScriptAction { script: { img.parent.sendToBack(img); } }
                ParallelAnimation {
                    SequentialAnimation {
                        PropertyAnimation { target: img; property: "scale"; to: scale*0.7; duration: 300; easing.type: Easing.OutQuad;}
                        PropertyAnimation { target: img; property: "scale"; to: scale; duration: 300; easing.type: Easing.InQuad;}
                    }
                    PropertyAnimation { target: img; properties: "y"; to: y; easing.type: Easing.InOutQuad; duration: 600;}
                }
                PropertyAction { target: img; property: "state"; value:""; }
            }
        }
    ]

}
